<template>
	<div style="position: relative;">
		<!-- 附件 -->
		<template>
			<div>
				<Row style="margin-bottom: 10px;">
					<Col span="3">
					<Upload :action="fileUrl + '/post/'+ fileType" :show-upload-list="false" :max-size="10240" :on-exceeded-size="outFileSize" :headers="httpHeader"
					 :before-upload="beforeUpload" :on-success="handleUpload" :on-error="errorInfo">
						<Button :size="buttonSize">
							<Icon type="ios-cloud-upload-outline" style="line-height: 8px;padding-right:8px;" />上传公网申请所需截图</Button>
					</Upload>
					</Col>
				</Row>
				<Row v-for="(item,index) in files" :key="index">
					<Tag :name="index" closable @on-close="delFiles" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;">
						<span @click="downLoad(item)">{{item.fileName.length > 30 ? item.fileName.substring(0,30)+'...':item.fileName}}</span>
					</Tag>
				</Row>
			</div>
		</template>
		<Spin size="large" fix v-if="loadingSpin">{{down ? "下载中...":"上传中..."}}</Spin>
	</div>
</template>
<script>
	import ajax from "../ajax_util"
	import Axios from 'axios'
	export default {
		components: {},
		data() {
			return {
				loadingSpin: false,
				httpHeader: {
					Authorization: this.$store.state.token
				},
				fileUrl: this.CONFIG.file_url,
				file: null,
				loadingStatus: false,
				fileUpLoadAction: "",
				down: false
			}
		},
		created: function() {},
		methods: {
			errorInfo(error, response, fileList) {
				console.log("error---》>>>>", error.status, error.data)
				if (error.status == 403) { //forbiden
					this.$Notice.error({
						title: '上传失败！',
						desc: '您没有当前操作权限',
					});
				} else if (error.status == 401) { //forbiden
					this.$Notice.error({
						title: '上传失败！',
						desc: '请重新登陆该系统',
					});
				} else if (error.status == 409) { //forbiden
					this.$Modal.warning({
						title: '上传失败！：',
						content: "您已在其他地方登录！",
					});
				} else if (error.status == 400) { //forbiden
					this.$Notice.error({
						title: '上传失败！',
						desc: '请联系管理员进行处理',
					});
				} else if (error.status == 406) { //forbiden
					this.$Notice.error({
						desc: response,
						duration: 5,
					});
				} else if (error.status == 429) { //forbiden
					this.$Notice.error({
						title: '上传失败！',
						desc: "操作太快，请稍后再试",
						duration: 5,
					});
				} else {
					this.$Notice.error({
						title: '上传失败！',
						desc: '请联系管理员进行处理',
					});
				}
				this.loadingSpin = false
			},
			beforeUpload(file) {
				console.log(file.name)
				if (file.name.length > 90) {
					this.$Message.warning({
						content: "上传失败！附件名称太长，请控制在90个字符以内！",
						duration: 3
					})
					this.loadingSpin = true
					return false
				} else {
					this.loadingSpin = true
					return true
				}
			},

			handleUpload(response, file, fileList) {
				this.files.push({
					fileUrl: response,
					fileName: file.name
				})
				fileList = []
				this.loadingSpin = false
			},
			delFiles(event, index) {
				var url = this.fileUrl + "/manage/" + this.files[index].fileUrl
				var that = this
				ajax.del({
					url: url,
					that: that,
					data: null,
					success: function(data) {
						that.files.splice(index, 1);
					}
				})
			},
			outFileSize(file, fileList) {
				this.$Message.warning({
					content: file.name + " 上传失败！上传文件大小不允许超过10M",
					duration: 3
				})
				this.loadingSpin = false
			},
			downLoad(i) {
				this.down = true
				console.log("i.fileUrl----->", i.fileUrl)
				this.loadingSpin = true
				var that = this;
				var url = this.fileUrl + '/get/' + i.fileUrl
				Axios.get(url, {
						responseType: 'blob'
					})
					.then(function(response) {
						console.log("------>", window.navigator.msSaveOrOpenBlob)
						if (window.navigator.msSaveOrOpenBlob) { //IE以及IE内核的浏览器
							try {
								var blob = new Blob([response.data])
								window.navigator.msSaveOrOpenBlob(blob, i.fileName)
							} catch (e) {
								console.log(e);
							}
						} else {
							var blob = new Blob([response.data])
							var downloadElement = document.createElement('a');
							var href = window.URL.createObjectURL(blob); //创建下载的链接
							downloadElement.href = href;
							downloadElement.download = i.fileName
							document.body.appendChild(downloadElement);
							downloadElement.click(); //点击下载
							document.body.removeChild(downloadElement); //下载完成移除元素
							window.URL.revokeObjectURL(href); //释放掉blob对象
						}
						that.down = false
						that.loadingSpin = false
					}).catch(function(error) {
						if (error && error.response) {
							if (error.response.status == 403) { //forbiden
								that.$Notice.error({
									title: '请求拒绝',
									desc: '您没有当前操作权限',
								});
							} else if (error.response.status == 401) { //forbiden
								that.$Notice.error({
									title: '用户未登陆',
									desc: '请重新登陆该系统',
								});
							} else if (error.response.status == 400) { //forbiden
								that.$Notice.error({
									title: '访问数据不存在',
									desc: '请联系管理员进行处理',
								});
							} else if (error.response.status == 406) { //forbiden
								that.$Notice.error({
									title: '访问数据不存在',
									desc: error.data,
									duration: 5,
								});
							} else {
								that.$Notice.error({
									title: '网络异常',
									desc: '请联系管理员进行处理',
								});
							}
						} else if (error == 400) {
							that.$Notice.warning({
								title: '访问数据不存在',
								desc: '请联系管理员进行处理',
							});
						} else if (error == 403) { //forbiden
							that.$Notice.error({
								title: '请求拒绝',
								desc: '您没有当前操作权限',

							});
						} else if (error == 404) {
							that.$Notice.error({
								title: '访问数据有误',
								desc: '请联系管理员进行处理',
							});
						} else if (error == 401) { //forbiden
							that.$Notice.error({
								title: '用户未登陆',
								desc: '请重新登陆该系统',
							});
						} else if (error == 406) { //forbiden
							that.$Notice.error({
								title: '访问数据不存在',
								desc: "请先配置审批节点审批人信息",
								duration: 5,
							});
						} else {
							that.$Notice.error({
								title: '网络异常',
								desc: '请联系管理员进行处理',
							});
						}
						that.loadingSpin = false
						that.down = false
					});
			}
		},
		props: {
			buttonSize: {
				default: "default"
			},
			fileType: {
				default: "req_appendix"
			},
			value: {
				default: Array
			},
		},
		computed: {
			files: {
				get: function() {
					console.log("-----this.value----->", this.value)
					if (this.value == undefined || this.value == null) {
						this.$emit('input', []);
						return []
					} else {
						return this.value;
					}
				},
				set: function(value) {
					this.$emit('input', value);
				}
			},
		},
		watch: {

		}
	}
</script>
